$(function() {
	$("#choose_attr1 ul li").click(function() {
		$("#choose_attr1 ul li").removeClass("on");
		$(this).addClass("on");
	});
	$(".choose_attr2 ul li").click(function() {
		$(".choose_attr2 ul li").removeClass("on");
		$(this).addClass("on");
	});
	$(".choose_attr3 ul li").click(function() {
		$(".choose_attr3 ul li").removeClass("on");
		$(this).addClass("on");
	});
	$(".tab_main ul li").click(function() {
		$(".tab_main ul li").removeClass("on");
		$(this).addClass("on");
	});
	$("#sent").click(function() {
		$("#pro").css("display", "block");
		$("#pro").siblings().css("display", "none");
	});
	$("#cuss").click(function() {
		$("#com").css("display", "block");
		$("#com").siblings().css("display", "none");

	});
	$(".pic img").click(function() {
		$(this).parent().siblings().children().removeClass("on");
		$(this).addClass("on");
		var src=$(this).attr("src");
		$(this).parent().parent().siblings(".pig_pic").html("<img src='"+src+"'>");
	});	
});
window.onload = function() {
	var use = document.getElementById("use");
	var core=document.getElementById("core");
	
	use.onmousemove=function(){
		core.style.display="block";
	}
	core.onmousemove=function(){
		core.style.display="block";
	}
	use.onmouseout=function(){
		core.style.display="none";
	}
	core.onmouseout=function(){
		core.style.display="none";
	}
	
	var sum = document.getElementById("choose_amount");
	var num = document.getElementById("num").innerHTML;

	sum.onclick = function(e) {
		var e = e || window.event;
		var el = e.target || e.srcElement; //通过事件对象的target属性获取触发元素
		var cls = el.className; //触发元素的class
		var countInout = this.getElementsByTagName('input')[0]; // 数目input
		var value = parseInt(countInout.value); //数目
		//通过判断触发元素的class确定用户点击了哪个元素
		switch(cls) {
			case 'add': //点击了加号
				if(value < num) {
					countInout.value = value + 1;
				}
				break;
			case 'reduce': //点击了减号
				if(value > 1) {
					countInout.value = value - 1;
				}
				break;
		}
	}

	sum.getElementsByTagName('input')[0].onkeyup = function() {
		var val = parseInt(this.value);
		if(isNaN(val) || val <= 0) {
			val = 1;
		}
		if(val >= num) {
			val = num;
		}
		if(this.value != val) {
			this.value = val;
		}
	}

	var box = document.getElementById("com_intro");
	var but = box.children[4].children[3].children[1].children[0];
	var a = document.getElementById("com_name");
	var b = document.getElementById("dt");
	var c = document.getElementById("img");
	var d = document.getElementById("choose_amount");
	var arr = [];
	var txt = localStorage.getItem("com_intro");
	if(txt) {
		var test = JSON.parse(txt);
		for(var i = 0; i < test.length; i++) {
			arr.push(test[i]);
		};
	}

	but.onclick = function() {
		var name = a.getElementsByTagName("p")[0].innerHTML;
		var span1 = a.getElementsByTagName("span")[0].innerHTML;
		var span2 = a.getElementsByTagName("span")[1].innerHTML;
		var money = b.getElementsByTagName("b")[0].innerHTML;
		var img = c.getElementsByClassName("on")[0].getElementsByTagName("img")[0].src;
		var num = d.getElementsByTagName("input")[0].value;
		var obj = {
			img: img,
			name: name,
			span1: span1,
			span2: span2,
			num: num,
			money: money,
		};
		arr.push(obj);

		var v = arr.length;
		var tnt = JSON.stringify(v);
		var txt = JSON.stringify(arr);
		
		localStorage.setItem("bbb", tnt);
		localStorage.setItem("com_intro", txt);
	}
}